﻿@{
    Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
}

@section header{
    <link href="~/Content/css/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/js/plugs/webuploader/webuploader.css" rel="stylesheet" type="text/css" />
    <style>
        .query-input {
            height: 32px;
            line-height: 32px;
            width: 30%;
            vertical-align: middle;
        }
    </style>
}

@section footer{
    <script src="~/Content/js/plugs/select2/select2.js" type="text/javascript"></script>
    <script src="~/Content/js/plugs/datetime/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
    <script src="~/Content/js/plugs/datetime/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>
    <script src="~/Content/js/plugs/webuploader/webuploader.js" type="text/javascript"></script>
    <script src="~/Content/js/plugs/ueditor/ueditor.config.js" type="text/javascript"></script>
    <script src="~/Content/js/plugs/ueditor/ueditor.all.min.js" type="text/javascript"></script>
    <script src="~/Content/js/plugs/textarea/jquery.autosize.js" type="text/javascript"></script>
    <script src="~/Content/js/bode/bode.grid.js" type="text/javascript"></script>
    <script src="~/Content/js/bode/bode.tree.js" type="text/javascript"></script>

    <script type="text/javascript">
        var datatable, tree;

        var tableOption = {
            url: {},
            columns: [],
            pageSize: 15,
            actions: [],
            formWidth: "40%",
            isBatch: false,
            extraFilters:[],
            imgSaveUrl: "/api/File/UploadPic",
            loadDataComplete: function (data) { }
        };

        var treeOption = {
            title:"",
            url: "",
            valueField: "value",
            textField: "text",
            parentField: "parentValue",
            tableParamField: "parentId",
            initialValue: "0",
            folderSelectEnable: false,
            multiSelectEnable: false,
            itemSelect: function (data) {
                datatable.setExtraFilter({
                    field: treeOption.tableParamField,
                    operate: "equal",
                    value: data[treeOption.valueField]
                });
            },
            loadCompleted: function () { },
            itemCancel: function (data) { }
        };

        var startfunction = function () { };
        var endfunction = function () { };
    </script>
    @RenderSection("customScript", true)

    <script type="text/javascript">
        $(function () {
            startfunction();
            //初始化数据
            datatable = new $.bode.grid("#dataTable", tableOption);
            tree = new $.bode.tree("#treeContent", treeOption);

            $("#tree").find(".widget-caption").text(treeOption.title);
            endfunction();
        });
    </script>
}

@RenderSection("headHtml", false)

<div class="page-container">
    <div class="page-body" style="padding:0;">
        <div class="row">

            <div id="tree" class="col-xs-4 col-md-3 col-lg-2">
                <div class="widget flat radius-bordered">
                    <div class="widget-header bg-info">
                        <span class="widget-caption">-</span>
                    </div>
                    <div class="widget-body" style="overflow-y: auto;">
                        <div id="treeContent" class="tree tree-solid-line">

                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xs-8 col-md-9 col-lg-10">
                <div class="widget flat radius-bordered">
                    <div class="widget-header bg-info">
                        <span class="widget-caption"><strong>@ViewBag.Title</strong></span>
                    </div>
                    <div class="widget-body">
                        <div role="grid" id="editabledatatable_wrapper" class="dataTables_wrapper form-inline no-footer">
                            <div class="row" style="padding-bottom: 10px;">
                                <div class="col-sm-4">
                                    <select style="width: 25%"></select>
                                    <select style="width: 25%"></select>
                                    <input type="text" class="query-input">
                                    <a class="btn btn-info btn-sm icon-only query-add" href="javascript:void(0);"><i class="fa fa-plus-square-o"></i></a>
                                </div>

                                <div class="col-sm-8">
                                    <div class="form-group" style="float: right" id="actionArea"></div>
                                </div>
                            </div>
                            <table class="table table-bordered table-hover table-striped dataTable no-footer" id="dataTable" aria-describedby="editabledatatable_info">
                                <thead>
                                    <tr></tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@RenderBody()
@RenderSection("footHtml", false)
<script type="text/javascript">
    $(function () {
        $("#tree .widget-caption>strong").text(treeOption.title);
        $("#tree .widget-body").height(document.body.scrollHeight - 140);
    });
</script>